<template>
    <page-header-wrapper title="菜单管理">
        <div class="split-page">
            <div class="f1">
                <a-card :bordered="false">
                    <div style="margin-bottom: 20px">
                        <a-button type="primary" @click="showModal">新增</a-button>
                        <a-button style="margin-left: 8px">编辑</a-button>
                    </div>
                    <a-table :columns="columns" rowKey="id" :data-source="list" :pagination="false">
                        <div slot="type" slot-scope="value">
                            <span v-if="value==1">菜单</span>
                            <span v-if="value==2">隐藏路由</span>
                            <span v-if="value==3">按钮</span>
                        </div>
                    </a-table>
                </a-card>
                <br>
                <br>
            </div>
            <div :style="`width: ${ylwidth}px; padding-left: 24px; box-sizing: border-box;`">
                <a-card :bordered="false" title="预览菜单效果">
                    <a-tree default-expand-all :tree-data="treeList" :showIcon="true" :replaceFields="{children:'children', title:'title', key:'id'}" @select="onSelect" @expand="onExpand">
                        <a-icon slot="file" type="file" />
                        <a-icon v-for="(icon, index) in treeIcon" :slot="icon" :type="icon" :key="index"/>
                    </a-tree>
                </a-card>
            </div>
        </div>
        <a-modal
            title="选择图标"
            :visible="selectIcon"
            width="700px"
            :zIndex="60"
            :centered="true"
            @ok="selectIcon=false"
            @cancel="selectIcon=false"
        >
            <div style="height:300px; overflow: auto;">
                <div class="big-icon" v-for="(icon, index) in allicon" :key="index" :class="{'on': icon == fromIcon}">
                    <a-icon :type="icon" @click="selectIconHandler(icon)"/>
                </div>
            </div>
        </a-modal>
        <a-modal title="新增菜单" :visible="visible" :footer="null" width="600px" @cancel="visible=false" :zIndex="50" :centered="true">
            <a-form layout="horizontal" v-bind="formItemLayout" :form="form" @submit="handleSubmit">
                <a-form-item label="类型">
                    <a-radio-group v-decorator="['type']">
                        <a-radio :value="1">菜单</a-radio>
                        <a-radio :value="2">隐藏路由</a-radio>
                        <a-radio :value="3">按钮</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="菜单标题">
                    <a-input v-decorator="['title',{rules:[{required:true,message:'请输入菜单标题'}]}]" placeholder="菜单标题"/>
                </a-form-item>
                <a-form-item label="菜单名称">
                    <a-input v-decorator="['name',{rules:[{required:true,message:'请输入菜单名称'}]}]" placeholder="菜单名称"/>
                </a-form-item>
                <a-form-item label="菜单路径">
                    <a-input v-decorator="['path']" placeholder="菜单路径"/>
                </a-form-item>
                <a-form-item label="前端组件">
                    <a-input v-decorator="['component']" placeholder="前端组件"/>
                </a-form-item>
                <a-form-item label="默认跳转地址">
                    <a-input v-decorator="['redirect']" placeholder="路由参数 redirect"/>
                </a-form-item>
                <a-form-item label="父级菜单">
                    <a-cascader v-decorator="['pid']" :fieldNames="{label: 'title', value: 'id', children: 'children' }" :options="[{id: 0, title: '无'},...list]" placeholder="默认跳转地址" />
                </a-form-item>
                <a-form-item label="菜单图标">
                    <a-input v-decorator="['icon']">
                        <a-icon slot="addonAfter" type="setting" @click="selectIcon=true"/>
                    </a-input>
                </a-form-item>
                <a-form-item label="排序">
                    <a-input-number v-decorator="['indexed']" placeholder="菜单排序"/>
                </a-form-item>
                <a-form-item style="text-align: right">
                    <a-button html-type="submit" type="primary">提交</a-button>
                    <a-button style="margin-left: 8px" @click="visible=false">取消</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </page-header-wrapper>
</template>

<script>
import http from '@/helper/request'
import { buildListToTree, allicon } from '@/helper/tools'
export default {
    data () {
        return {
            ylwidth: 380,
            visible: false,
            confirmLoading: false,
            selectIcon: false,
            treeList: [],
            treeIcon: [],

            columns: [
                { title: '类型', dataIndex: 'type', scopedSlots: { customRender: 'type' } },
                { title: '菜单名称', dataIndex: 'title' },
                { title: '菜单路径', dataIndex: 'path' },
                { title: '前端组件', dataIndex: 'component' },
                { title: '前端名称', dataIndex: 'name' },
                { title: '父级菜单', dataIndex: 'pid' },
                { title: '菜单图标', dataIndex: 'icon' },
                { title: '排序', dataIndex: 'indexed' }
            ],
            list: [],
            allicon,
            fromIcon: '',
            formItemLayout: {
                labelCol: {
                    lg: { span: 5 }, sm: { span: 7 }
                },
                wrapperCol: {
                    lg: { span: 16 }, sm: { span: 17 }
                }
            }
        }
    },
    beforeCreate () {
        this.form = this.$form.createForm(this, {
            name: 'normal_login'
        })
    },
    async mounted () {
        await this.querymenulist()
    },
    methods: {
        selectIconHandler (icon) {
            this.fromIcon = icon
            this.form.setFieldsValue({ icon })
        },
        handleSubmit (e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                console.log(values)
                if (!err) {
                    http.post('/menu/add', values).then(() => {
                        this.querymenulist()
                    })
                    this.form.resetFields()
                    this.visible = false
                }
            })
        },
        querymenulist () {
            return http.get('/menu/list').then(({ data }) => {
                this.list = data
                var newdata = JSON.parse(JSON.stringify(data))
                var treeList = []
                var treeIcon = []
                newdata.map(item => {
                    var slots = {}
                    var { id, pid, title, icon } = item
                    if (icon) {
                        treeIcon.push(icon)
                        slots = { icon }
                    } else {
                        slots = { icon: 'file' }
                    }
                    treeList.push({ id, title, pid, slots })
                })
                this.treeIcon = treeIcon
                this.treeList = buildListToTree(treeList)
            })
        },
        handleCancel () {
            this.visible = false
        },
        onSelect (keys, event) {
            console.log('Trigger Select', keys, event)
        },
        onExpand () {
            console.log('Trigger Expand')
        },
        showModal () {
            this.visible = true
        }
    }
}
</script>

<style lang="less">
.big-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    &.on {
        color: white;
        background: #1890ff;
    }
}
</style>
